<template>
  <view class="page" :style="data.loading ? 'opacity: 0;' : 'opacity: 1;'">
    <image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
      mode="aspectFill"></image>
    <z-paging-swiper>
      <template #top>
				<uv-navbar :bgColor="'rgba(0,0,0,0)'" leftIcon="" :fixed="false" title="项目列表" v-if="data.userInfo.position_id == 12 || !data.isPer "></uv-navbar>
        <view class="header-box" v-else>
          <view class="status-bar-height" :style="`height:${sys().statusBarHeight}px`"></view>
          <view class="header-tab-box" >
            <uv-tabs :list="data.tabList" :activeStyle="{
							color: '#181818',
							fontWeight: '500',
							fontSize: '18px'
						}" :inactiveStyle="{
							fontSize: '15px',
							color: '#3E3E3E'
						}" lineColor="#000" :current="data.activeIdx" @change="tabActiveChange"></uv-tabs>
          </view>
        </view>
        <view class="search-box" v-if="data.isPer">
          <uv-search height="74rpx" :bgColor="'#ffffff'" placeholder="项目名称/项目编号" :showAction="false" shape="round"
            @search="searchChange"></uv-search>

          <view class="search-add" @click="navToDetail" v-if="data.activeListIdx == 2 && (data.userInfo.position_id == 2 || data.userInfo.position_id == 7)">
            <uv-icon name="plus-circle" size="22" color="#181818"></uv-icon>
            <view class="search-desc">增减项</view>
          </view>
          <view class="search-add" @click="navToDetail"
            v-if="data.activeListIdx == 3 && (data.userInfo.position_id == 2 || data.userInfo.position_id == 8)">
            <uv-icon name="plus-circle" size="22" color="#181818"></uv-icon>
            <view class="search-desc">售后</view>
          </view>
        </view>
      </template>
      <swiper class="swiper" :current="data.activeIdx" @animationfinish="swiperAnimationfinish">
        <swiper-item class="swiper-item" v-for="(item, index) in data.tabList" :key="index">
          <projectList v-if="data.activeIdx == index" ref="listItem" :tabIndex="index" :currentIndex="data.activeIdx" :tabVal="data.activeListIdx"
            :keyword="data.keyword"></projectList>
        </swiper-item>
				<swiper-item class="swiper-item" v-if="!data.isPer">
					<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
						<uv-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#737373"></uv-empty>
					</view>
				</swiper-item>
      </swiper>

      <template #bottom>
        <tabbar></tabbar>
      </template>
    </z-paging-swiper>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const { proxy: that } = getCurrentInstance();

const data = reactive({
	isPer: true,
  dataList: [],
  keyword: '',
  userInfo: '',
  loading: true,
  activeIdx: 0,
	activeListIdx: 0,
  tabList: []
});
onLoad((e) => {
  data.userInfo = uni.getStorageSync('userInfo');
	if(data.userInfo.position_id != 12){
		getUserMenuList();
	}else{
		data.tabList = [
			{
			  name: '销售'
			},
			{
			  name: '施工'
			},
			{
			  name: '增减项'
			},
			{
			  name: '售后'
			}
		]
		setTimeout(() => {
		  data.loading = false;
			reloadCurrentList();
		}, 200);
	}
});
const getUserMenuList = () => {
	that.$hApi.getUserMenuList({
		admin_id: data.userInfo.id
	}).then(res => {
		console.log(res, '权限菜单列表');
		if (res.code == '200') {
			let idx = res.data.findIndex(item => {
				return item.vue_path == '/project'
			})
			console.log(idx, 'zxcasdqwe');
			if(idx == -1){
				data.loading = false;
				data.isPer = false;
				return;
			}
			let menuList = res.data[idx].nodes;
			let tabList = [];
			menuList.map(item => {
				switch(item.vue_path){
					case '/project/salesManagement':
						tabList.push({ name: '销售' });
					break;
					case '/project/constructionManagement':
						tabList.push({ name: '施工' });
					break;
					case '/project/increase_decrease_items':
						tabList.push({ name: '增减项' });
					break;
					case '/project/after_sales_list':
						tabList.push({ name: '售后' });
					break;
				}
			})
			switch(tabList[0].name){
				case '销售':
					data.activeListIdx = 0;
				break;
				case '施工':
					data.activeListIdx = 1;
				break;
				case '增减项':
					data.activeListIdx = 2;
				break;
				case '售后':
					data.activeListIdx = 3;
				break;
			}
			data.tabList = tabList;
			setTimeout(() => {
			  data.loading = false;
				reloadCurrentList();
			}, 200);
			
		}
	})
};
const tabActiveChange = (e) => {
	switch(e.name){
		case '销售':
			data.activeListIdx = 0;
		break;
		case '施工':
			data.activeListIdx = 1;
		break;
		case '增减项':
			data.activeListIdx = 2;
		break;
		case '售后':
			data.activeListIdx = 3;
		break;
	}
	data.activeIdx = e.index;
};

const swiperAnimationfinish = (e) => {
	switch(data.tabList[e.detail.current].name){
		case '销售':
			data.activeListIdx = 0;
		break;
		case '施工':
			data.activeListIdx = 1;
		break;
		case '增减项':
			data.activeListIdx = 2;
		break;
		case '售后':
			data.activeListIdx = 3;
		break;
	}
	data.activeIdx = e.detail.current;
};
// 项目详情
const navToDetail = () => {
  let path = '';
  if (data.activeIdx == 2) {
    path = '/pages/increase_decrease_items/idi_add/idi_add';
  } else {
    path = '/pages/after_sales_list/as_add/as_add';
  }
  uni.navigateTo({
    url: path
  });
};

const reloadCurrentList = () => {
  console.log(that.$refs.listItem, 'asdasd');
  that.$refs.listItem[data.activeIdx].reload();
};

const searchChange = (e) => {
  console.log(e, 'searchChange');
  data.keyword = e;
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
